<template>
  <div class="statio">
    <div class="search">
      <el-button
        type="primary"
        @click="addEmployee(0)"
        plain="plain"
        class="addPerson"
        size="small"
        >添加新员工</el-button
      >
      <div>
        <el-input
          clearable
          v-model="keyword"
          size="small"
          @keydown.native.enter="todoSearch"
          placeholder="搜索姓名/手机号/岗位"
          style="width: 222px"
        ></el-input>
        <el-button @click="todoSearch" type="primary" size="small"
          >查询</el-button
        >
      </div>
    </div>

    <div class="tabellijst">
      <div class="tabellijst-l">
        <el-tree
          :data="treedata"
          :props="defaultProps"
          default-expand-all
          @node-click="handleNodeClick"
        ></el-tree>
      </div>
      <div class="tabellijst-r">
        <base-table
          ref="baseTable"
          :tableSetting="tableSetting"
          @handleCommon="handleCommon"
        ></base-table>
      </div>
    </div>

    <!-- 添加弹框 -->
    <el-dialog
      :title="titleStation"
      :close-on-click-modal="false"
      :show-close="false"
      :visible.sync="dialogStation"
      class="postionbot"
      width="600px"
      center
      top
    >
      <el-form
        status-icon
        ref="form"
        :model="form"
        label-width="120px"
        :rules="rules"
        class="demo-ruleForm"
      >
        <el-form-item label="账号" prop="userName">
          <el-input
            type="text"
            v-model.trim="form.userName"
            placeholder="请输入账号"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" v-if="static == 0">
          <el-input
            type="password"
            v-model.trim="form.password"
            placeholder="请输入密码"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input
            type="text"
            v-model.trim="form.name"
            placeholder="请输入姓名"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="身份证号码" prop="idCard">
          <el-input
            type="text"
            v-model.trim="form.idCard"
            placeholder="请输入身份证号码"
            onkeyup="this.value=this.value.replace(/[^\X0-9]/g, '')"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="岗位" prop="postId">
          <el-select
            class="filter-item"
            v-model="form.postId"
            placeholder="请选择岗位"
          >
            <el-option
              v-for="attr in dictOptions"
              :key="attr.id"
              :label="attr.name"
              :value="attr.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="部门" prop="deptId">
          <el-cascader
            :options="postData"
            v-model="selectedOptions"
            :props="{ checkStrictly: true }"
            @change="handleChoosedepartment"
          ></el-cascader>
          <!-- <el-tree
            ref="tree"
            :data="postData"
            show-checkbox
            :props="defaultProps"
            :highlight-current="true"
            :node-key="form.deptId"
            @node-click="handledeptIdClick"
          ></el-tree> -->
          <!-- <el-select
            v-model="form.deptId"
            placeholder="请选择部门"
            @change="handleChoosedepartment"
          >
            <el-option-group
              v-for="group in postData"
              :key="group.value"
              :label="group.label"
            >
              <el-option
                v-show="group.children.length > 0"
                v-for="item in group.children"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
              <el-option
                v-show="!group.children"
                :key="group.value"
                :label="group.label"
                :value="group.value"
              >
              </el-option>
            </el-option-group>
          </el-select> -->
        </el-form-item>

        <el-form-item label="入职日期" prop="entryDate">
          <el-date-picker
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择入职日期"
            v-model="form.entryDate"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input
            type="text"
            v-model.trim="form.phone"
            placeholder="请输入手机号"
          ></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="form.sex">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="2">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="出生日期" prop="birthday">
          <el-date-picker
            :default-value="timeDefaultShow"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择出生日期"
            v-model="form.birthday"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="学历" prop="edu">
          <el-radio-group v-model.trim="form.edu">
            <el-radio :label="1">大专</el-radio>
            <el-radio :label="2">本科</el-radio>
            <el-radio :label="3">硕士</el-radio>
            <el-radio :label="4">博士</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="QQ账号" prop="qqAccount">
          <el-input
            type="text"
            v-model.trim="form.qqAccount"
            placeholder="请输入QQ账号"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input
            type="text"
            v-model.trim="form.email"
            placeholder="请输入邮箱"
          ></el-input>
        </el-form-item>
        <el-form-item label="职称" prop="title">
          <el-input
            type="text"
            v-model.trim="form.title"
            placeholder="请输入职称"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="上传入职登记表"
          prop="entryRegForm"
          class="entLeft"
        >
          <el-upload
            :headers="headers"
            action="api/upload/uploadFile/1"
            class="upload-demo"
            :show-file-list="true"
            :on-success="entryRegFormrSuccess"
            :before-upload="beforeAvatarUpload"
            :on-preview="handlePreviews"
            :on-remove="handleRemoves"
            :file-list="fileLists"
            :limit="1"
            :on-exceed="handleExceed"
          >
            <el-button size="small">点击上传</el-button>
            <!-- <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
          </el-upload>
        </el-form-item>
        <el-form-item label="上传学历扫描件" prop="eduAnnex" class="entRight">
          <el-upload
            :headers="headers"
            action="api/upload/uploadFile/2"
            class="upload-demo"
            :show-file-list="true"
            :on-success="eduAnnexrSuccess"
            :before-upload="beforeAvatarUpload"
            :on-preview="handlePreviews"
            :on-remove="handleRemovess"
            :file-list="fileListss"
            :limit="1"
            :on-exceed="handleExceeds"
          >
            <el-button size="small">点击上传</el-button>
            <!-- <img v-if="imageUrls" :src="imageUrls" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="close('form')">取消</el-button>
        <el-button type="primary" @click="save('form')" :loading="loading"
          >确定</el-button
        >
      </span>
    </el-dialog>
    <!-- 查看详情弹框 -->
    <el-dialog
      :title="titleStation"
      :close-on-click-modal="false"
      :show-close="true"
      :visible.sync="dialogStations"
      class="postionbots"
      width="600px"
      center
    >
      <el-form
        status-icon
        ref="form"
        :model="form"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item label="账号 :" prop="userName">
          <label>{{ form.userName }}</label>
        </el-form-item>
        <el-form-item label="姓名 :" prop="name">
          <label>{{ form.name }}</label>
        </el-form-item>
        <el-form-item label="身份证 :" prop="idCard">
          <label>{{ form.idCard }}</label>
        </el-form-item>
        <el-form-item label="岗位 :" prop="postId">
          <label>{{ postName }}</label>
        </el-form-item>
        <el-form-item label="入职日期 :" prop="entryDate">
          <label>{{ form.entryDate }}</label>
        </el-form-item>
        <el-form-item label="手机号 :" prop="phone">
          <label>{{ form.phone }}</label>
        </el-form-item>
        <el-form-item label="性别 :" prop="sex">
          <label v-if="form.sex == 1">男</label>
          <label v-if="form.sex == 2">女</label>
        </el-form-item>
        <el-form-item label="出生日期 :" prop="birthday">
          <label>{{ form.birthday }}</label>
        </el-form-item>
        <el-form-item label="学历 :" prop="edu">
          <label v-if="form.edu == 1">大专</label>
          <label v-if="form.edu == 2">本科</label>
          <label v-if="form.edu == 3">硕士</label>
          <label v-if="form.edu == 4">博士</label>
        </el-form-item>
        <el-form-item label="QQ账号：" prop="qqAccount">
          <label>{{ form.qqAccount }}</label>
        </el-form-item>
        <el-form-item label="邮箱：" prop="email">
          <label>{{ form.email }}</label>
        </el-form-item>
        <el-form-item label="职称：" prop="title">
          <label>{{ form.title }}</label>
        </el-form-item>
        <el-form-item
          label="入职登记表附件 :"
          prop="entryRegForm"
          class="entLeft"
        >
          <el-button
            v-if="this.caijianType == true"
            @click="previewPDF(form.entryRegForm)"
            style="margin-bottom: 20px"
            >预览PDF</el-button
          >
          <el-image
            v-if="this.caijianType == false"
            style="width: 100px; height: 100px"
            :src="form.entryRegForm"
            :preview-src-list="[form.entryRegForm]"
          ></el-image>
        </el-form-item>
        <el-form-item label="学历扫描附件 :" prop="eduAnnex" class="entRight">
          <el-button
            v-if="this.xueliType == true"
            @click="previewsPDF(form.eduAnnex)"
            style="margin-bottom: 20px"
            >预览PDF</el-button
          >
          <el-image
            v-if="this.xueliType == false"
            style="width: 100px; height: 100px"
            :src="form.eduAnnex"
            :preview-src-list="[form.eduAnnex]"
          ></el-image>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="dialogStations = false">关 闭</el-button>
      </span>
    </el-dialog>
    <!-- 转正 -->
    <el-dialog
      :title="titleStation"
      :close-on-click-modal="false"
      :show-close="false"
      :visible.sync="dialogs"
      width="500px"
      center
    >
      <el-form
        status-icon
        ref="form"
        :model="form"
        label-width="130px"
        :rules="rules"
        class="demo-ruleForm"
      >
        <el-form-item label="员工姓名:" prop="name">
          <label>{{ form.name }}</label>
        </el-form-item>
        <el-form-item label="是否有转正考核:">
          <el-radio-group v-model="radio">
            <el-radio :label="1">有</el-radio>
            <el-radio :label="0">无</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          v-if="radio === 1"
          label="上传转正考核表:"
          prop="filePath"
        >
          <el-upload
            :headers="headers"
            class="upload-demo"
            action="api/upload/uploadFile/4"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :file-list="fileList"
          >
            <el-button size="small" type="primary" plain="plain"
              >点击上传</el-button
            >
          </el-upload>
        </el-form-item>
        <el-form-item label="合同开始日期:" prop="startData">
          <el-date-picker
            v-model="form.startData"
            @change="changeData1"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="合同截止日期:" prop="endData">
          <el-date-picker
            v-model="form.endData"
            @change="changeData2"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
        <span class="warning"
          >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;温馨提示:合同起始日期一旦填写不可更改,请慎重填写后再提交!</span
        >
      </el-form>
      <span slot="footer">
        <el-button @click="close('form')">取 消</el-button>
        <el-button type="primary" @click="become('form')" :loading="loading"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 转正表下载 -->
    <el-dialog
      title="转正考核表"
      :close-on-click-modal="false"
      :show-close="false"
      :visible.sync="dialogUpload"
      width="500px"
      center
    >
      <el-form
        status-icon
        ref="form"
        :model="form"
        label-width="130px"
        class="demo-ruleForm"
      >
        <el-form-item label="员工姓名:" prop="name">{{
          personName
        }}</el-form-item>
        <el-form-item label="转正考核表图片:" v-if="imgFlag">
          <el-image
            style="width: 100px; height: 100px"
            :src="assessUrl"
            :preview-src-list="[assessUrl]"
          ></el-image>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="dialogUpload = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import baseTable from "@/components/table/baseTable";
import {
  selectEmpList,
  deleUserAccount,
  insertEmp,
  updateEmp,
  selectSysPostList,
  setConversion,
  selectEmpInfoById,
  downloadFile,
  selectConversion,
  getdeptList,
  getPdf,
} from "@/service/Api.js"; //接口
import md5 from "js-md5";

export default {
  components: { baseTable },
  name: "personnelMent",
  props: ["menuFlag"],
  data() {
    var validatedeptId = (rule, value, callback) => {
      if (this.selectedOptions.length === 0) {
        callback(new Error("请选择部门"));
      }
      // else if (value !== this.ruleForm2.pass) {
      //   callback(new Error('两次输入密码不一致!'));
      // }
      else {
        callback();
      }
    };
    var checkIdentitytionId = (rule, value, callback) => {
      console.log(value);
      if (!value) {
        return callback(new Error("身份证号不能为空"));
      }
      if (!/(^\d{15}$)|(^\d{17}(\d|X|x)$)/.test(value)) {
        callback(new Error("你输入的身份证长度或格式错误"));
      }
      //身份证城市
      var aCity = {
        11: "北京",
        12: "天津",
        13: "河北",
        14: "山西",
        15: "内蒙古",
        21: "辽宁",
        22: "吉林",
        23: "黑龙江",
        31: "上海",
        32: "江苏",
        33: "浙江",
        34: "安徽",
        35: "福建",
        36: "江西",
        37: "山东",
        41: "河南",
        42: "湖北",
        43: "湖南",
        44: "广东",
        45: "广西",
        46: "海南",
        50: "重庆",
        51: "四川",
        52: "贵州",
        53: "云南",
        54: "西藏",
        61: "陕西",
        62: "甘肃",
        63: "青海",
        64: "宁夏",
        65: "新疆",
        71: "台湾",
        81: "香港",
        82: "澳门",
        91: "国外",
      };
      if (!aCity[parseInt(value.substr(0, 2))]) {
        callback(new Error("你的身份证地区非法"));
      }
      // 出生日期验证
      var sBirthday = (
          value.substr(6, 4) +
          "-" +
          Number(value.substr(10, 2)) +
          "-" +
          Number(value.substr(12, 2))
        ).replace(/-/g, "/"),
        d = new Date(sBirthday);
      if (
        sBirthday !=
        d.getFullYear() + "/" + (d.getMonth() + 1) + "/" + d.getDate()
      ) {
        callback(new Error("身份证上的出生日期非法"));
      }

      // 身份证号码校验
      var sum = 0,
        weights = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2],
        codes = "10X98765432";
      for (var i = 0; i < value.length - 1; i++) {
        sum += value[i] * weights[i];
      }
      var last = codes[sum % 11]; //计算出来的最后一位身份证号码
      if (value[value.length - 1] != last) {
        callback(new Error("你输入的身份证号非法"));
      }
      callback();
    };
    return {
      headers: {
        "API-User-Token": sessionStorage.getItem("token"), //文件上传需携带token
      },
      imgFlag: true,
      fit: ["fill", "contain", "cover", "none", "scale-down"],
      assessUrl: "",
      srcList: [],
      radio: 1,
      timeDefaultShow: "",
      selectedOptions: [], //部門綁定數組
      tableSetting: {
        tableApiFn: selectEmpList,
        defaulteParams: {
          keyword: "",
          deptId: "", //部门id
        },
        options: [
          { prop: "id", label: "员工编号" },
          { prop: "name", label: "姓名" },
          { prop: "idCard", label: "身份证号码" },
          { prop: "postName", label: "岗位" },
          { prop: "entryDate", label: "入职日期" },
          { prop: "phone", label: "手机号" },
          {
            prop: "sex",
            label: "性别",
            formatter: "formatter",
          },
          { prop: "birthday", label: "出生日期" },
          { prop: "edu", label: "学历" },
          { prop: "state", label: "状态" },
        ],
        width: "350",
        btns: [
          {
            text: "查看详情",
            size: "mini",
            handleName: "btnSelect",
            type: "info",
            plain: "plain",
          },
          {
            text: "转正",
            size: "mini",
            handleName: "btnConver",
            type: "success",
            plain: "plain",
            show: (row) => {
              return row.state == 1;
            },
          },
          {
            text: "查看转正表",
            size: "mini",
            handleName: "positive",
            type: "success",
            plain: "plain",
            show: (row) => {
              return row.state !== 1;
            },
          },
          {
            text: "编辑",
            size: "mini",
            handleName: "addEmployee",
            type: "primary",
            plain: "plain",
          },
          {
            text: "删除",
            size: "mini",
            handleName: "btnDelete",
            type: "danger",
            plain: "plain",
          },
        ],
      },
      dialogStation: false,
      dialogStations: false,
      dialogs: false,
      dialogcont: false,
      titleStation: "",
      loading: false,
      dictOptions: [],
      fileList: [],
      fileLists: [],
      fileListss: [],
      imageUrl: "",
      imageUrls: "",
      imageUrlss: "",
      imgUrl: "",
      pdfUrl: "",
      caijianType: true,
      xueliType: true,
      form: {
        userName: "",
        password: "",
        name: "",
        deptId: "",
        postId: "",
        entryDate: "",
        phone: "",
        sex: 1,
        birthday: "",
        edu: 1,
        qqAccount: "",
        email: "",
        title: "",
        entryRegForm: "",
        eduAnnex: "",
        startData: "",
        endData: "",
        filePath: "",
        id: "",
        idCard: "",
      },
      postName: "",
      rules: {
        userName: [
          { required: true, message: "请输入账号", trigger: "blur" },
          {
            required: true,
            pattern: /^[A-Za-z0-9]+$/,
            message: "账号只能是数字或字母",
            trigger: ["blur", "change"],
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: ["blur", "change"],
          },
        ],
        name: [
          {
            required: true,
            message: "请输入姓名",
            trigger: ["blur", "change"],
          },
        ],
        idCard: [{
          validator: checkIdentitytionId,
          trigger: "blur",
        }],
        deptId: [
          { required: true, validator: validatedeptId, trigger: "change" },
        ],
        postId: [{ required: true, message: "请选择岗位", trigger: "change" }],
        entryDate: [
          { required: true, message: "请选择入职日期", trigger: "blur" },
        ],
        phone: [
          { required: true, message: "请输入联系电话", trigger: "blur" },
          {
            required: true,
            pattern: /^1[3456789]\d{9}$/,
            message: "请输入正确的手机号",
            trigger: ["blur"],
          },
        ],
        sex: [{ required: true, message: "请选择性别", trigger: "change" }],
        edu: [{ required: true, message: "请选择学历", trigger: "change" }],
        birthday: [
          { required: true, message: "请选择出生日期", trigger: "blur" },
        ],
        entryRegForm: [
          { required: true, message: "请上传入职登记表", trigger: "blur" },
        ],
        eduAnnex: [
          { required: true, message: "请上传学历附件", trigger: "blur" },
        ],
        filePath: [
          { required: true, message: "请上传转正考核表", trigger: "blur" },
        ],
        quitForm: [
          { required: true, message: "请上传离职申请表", trigger: "blur" },
        ],
        startData: [
          { required: true, message: "请选择合同开始日期", trigger: "blur" },
        ],
        endData: [
          { required: true, message: "请选择合同截止日期", trigger: "blur" },
        ],
        email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur"],
          },
        ],
      },
      dialogImageUrl: "",
      dialogVisible: false,
      static: "",
      id: "",
      dialogUpload: false,
      personName: "",
      posiPath: "",
      keyword: "",
      deptId: "",
      //树形结构
      treedata: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      postData: [], //部门选择
    };
  },
  created() {
    this.timeDefaultShow = new Date();
    this.timeDefaultShow.setYear(new Date().getFullYear() - 25);
    this.getdept();
  },
  methods: {
    // 部门列表树
    getdept() {
      getdeptList().then((res) => {
        if (res.code === 0) {
          this.treedata = [
            {
              name: "长沙豆子信息科技有限公司",
              id: "",
              children: res.data,
            },
          ];
          this.postData = this.TreeDataSource(res.data);
          // this.postData = res.data;

          // this.postData = res.data.map((v) => {
          //   return {
          //     value: v.id,
          //     label: v.name,
          //     children: v.children,
          //   };
          // });
          // console.log("postData", this.postData);
        }
      });
    },
    // 递归替换属性名
    TreeDataSource(arr) {
      return arr.map((v, i) => {
        return {
          ...v,
          value: v.id,
          label: v.name,
          children: v.children ? this.TreeDataSource(v.children) : "",
        };
      });
    },
    //选择部门
    handleChoosedepartment(value) {
      console.log(value);
      // let postId = value.slice(-1);
      // this.form.deptId = value;
    },
    //树形点击
    handleNodeClick(data) {
      // console.log(data);
      this.deptId = data.id;
      this.tableSetting.defaulteParams = {
        keyword: this.keyword,
        deptId: this.deptId,
      };
      this.$refs.baseTable.initData(null, 1);
    },
    handledeptIdClick(data) {
      this.form.deptId = data.id;
    },
    //岗位下拉
    fousdep() {
      selectSysPostList().then((res) => {
        // console.log(res);
        if (res.code == 0) {
          this.dictOptions = res.data;
        }
      });
    },
    todoSearch() {
      this.tableSetting.defaulteParams = {
        keyword: this.keyword,
        deptId: this.deptId,
      };
      this.$refs.baseTable.initData(null, 1);
    },
    handleCommon(name, row, idx) {
      if (this[name]) {
        this[name](row, idx);
      }
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    //上传格式及大小
    beforeAvatarUpload(file) {
      var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
      const extension = testmsg === "jpg";
      const extension2 = testmsg === "png";
      const extension3 = testmsg === "pdf";
      if (!extension && !extension2 && !extension3) {
        this.$message({
          message: "上传文件只能是 jpg、png、pdf格式!",
          type: "warning",
        });
      }
      return extension || extension2 || extension3;
    },
    //上传入职登记表附件
    entryRegFormrSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      // console.log(this.imageUrl);
      // console.log(file.raw);
      if (res.code == 0) {
        // this.form.entryRegForm = `http://192.168.1.240/storage/public/${res.data.fileIds}`;
        this.form.entryRegForm = res.data.fileIds;
      } else {
        this.$message.error(res.message);
      }
    },
    handleExceed(files, fileLists) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileLists.length
        } 个文件`
      );
    },
    handleRemoves(file, fileLists) {
      console.log(file, fileLists);
    },
    handlePreviews(file) {
      if (file.response) {
        let obj = file;
        let key = "urls";
        let value = file.response.data.fileIds;
        obj[key] = value;
        console.log(obj);
      }
      let fileType = file.urls.split("fileUrl=")[1].split(".")[1].split("&")[0];
      console.log(file);
      if (fileType == "pdf") {
        let pdf = file.urls.split("fileUrl=")[1];
        console.log(pdf);
        let params = pdf;
        getPdf(params).then((res) => {
          const binaryData = [];
          binaryData.push(res);
          let url = window.URL.createObjectURL(
            new Blob(binaryData, { type: "application/pdf" })
          );
          this.pdfUrl = url;
          window.open(this.pdfUrl, "_blank");
        });
      } else {
        let img = file.urls.split("fileUrl=")[1];
        console.log(img);
        let params = img;
        getPdf(params).then((res) => {
          const binaryData = [];
          binaryData.push(res);
          let url = window.URL.createObjectURL(
            new Blob(binaryData, {
              type: ["image/png", "image/jpg", "image/jpeg"],
            })
          );
          this.imgUrl = url;
          window.open(this.imgUrl, "_blank");
        });
      }
    },
    //上传学历扫描附件
    eduAnnexrSuccess(res, file) {
      this.imageUrls = URL.createObjectURL(file.raw);
      if (res.code == 0) {
        // this.form.eduAnnex = `http://192.168.1.240/storage/public/${res.data.fileIds}`;
        this.form.eduAnnex = res.data.fileIds;
      } else {
        this.$message.error(res.message);
      }
    },
    handleExceeds(files, fileListss) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileListss.length
        } 个文件`
      );
    },
    handleRemovess(file, fileListss) {
      console.log(file, fileListss);
    },
    //上传转正考核表
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      if (res.code == 0) {
        this.form.filePath = res.data.fileIds;
      } else {
        this.$message.error(res.message);
      }
    },

    //查看转正表
    positive(row) {
      // this.posiPath = row.assessForm;
      // // console.log(this.posiPath)
      // this.personName = row.name;
      // // console.log(this.personName)
      // this.dialogUpload = true;

      // this.url = this.$url + row.assessForm;
      // console.log(row, "url")
      // this.srcList.push(this.$url + row.srcList)
      this.imgFlag = row.haveAssess ? false : true;
      selectConversion(row.id).then((response) => {
        if (response.code === 0) {
          this.posiPath = response.data.assessForm;
          (this.personName = response.data.name), (this.dialogUpload = true);
          this.assessUrl = response.data.assessForm;
        }
      });
    },
    // 转正表下载
    posiupload() {
      let data = {
        type: "4",
        filePath: this.posiPath,
        fileName: this.personName,
      };
      const iframe = document.createElement("iframe");
      iframe.style.display = "none";
      iframe.style.height = 0;
      // console.log(row.path)
      iframe.src = `/api/download/downloadFile/${data.type}?filePath=${data.filePath}&fileName=${data.fileName}`;
      document.body.appendChild(iframe);
      setTimeout(() => {
        iframe.parentNode.removeChild(iframe);
      }, 5 * 6 * 1000);
    },
    //查看员工详情
    btnSelect(row) {
      this.titleStation = "入职登记";
      let data = {};
      selectEmpInfoById(row.id).then((res) => {
        this.form = res.data;
        // console.log("this.form", this.form);
        this.postName = res.data.postName;
        this.caijianType = this.form.entryRegForm.includes("pdf");
        this.xueliType = this.form.eduAnnex.includes("pdf");
        // console.log("this.xueliType", this.xueliType);
      });

      this.dialogStations = true;
    },
    // PDF预览
    previewPDF() {
      let pdf = this.form.entryRegForm.split("fileUrl=")[1];
      // console.log(pdf);
      let params = pdf;
      getPdf(params).then((res) => {
        const binaryData = [];
        binaryData.push(res);
        let url = window.URL.createObjectURL(
          new Blob(binaryData, { type: "application/pdf" })
        );
        this.pdfUrl = url;
        // console.log("url:");
        // console.log(url);
        window.open(this.pdfUrl, "_blank");
      });
    },
    previewsPDF() {
      let pdf = this.form.eduAnnex.split("fileUrl=")[1];
      // console.log(pdf);
      let params = pdf;
      getPdf(params).then((res) => {
        const binaryData = [];
        binaryData.push(res);
        let url = window.URL.createObjectURL(
          new Blob(binaryData, { type: "application/pdf" })
        );
        this.pdfUrl = url;
        // console.log("url:");
        // console.log(url);
        window.open(this.pdfUrl, "_blank");
      });
    },
    //添加-修改新员工
    addEmployee(row) {
      // 岗位列表
      this.fousdep();
      if (row == 0) {
        this.imageUrl = "";
        this.imageUrls = "";
        this.titleStation = "添加新员工";
        this.selectedOptions = [];
        this.static = 0;
        this.form = {};
        // this.form.sex = 1;
        // this.form.edu = 1;
      } else {
        this.static = 2;
        this.titleStation = "编辑员工信息";
        // console.log(row);
        selectEmpInfoById(row.id).then((res) => {
          console.log(res.data);
          this.id = row.id;
          this.form = res.data;
          this.imageUrl = res.data.entryRegForm;
          this.imageUrls = res.data.eduAnnex;
          this.idCard = res.data.idCard;
          // this.$refs.tree.setCheckedKeys([res.data.deptId]);

          let vm = this;
          if (res.data.entryRegForm) {
            //后台返回的文件链接
            let a = res.data.entryRegForm.split(",");
            if (a.length > 0) {
              a.forEach((item) => {
                var obj = {};
                let index = item.lastIndexOf("\/");
                // let fileName = item.substring(index + 1, item.length).split("&")[0]; //最后的文件名截取出来
                let fileName = res.data.name + "入职登记表";
                vm.$set(obj, "name", fileName);
                vm.$set(obj, "urls", item); //修改files里面的结构（name,url）
                vm.fileLists.push(obj);
              });
            }
          }
          if (res.data.eduAnnex) {
            //后台返回的文件链接
            let a = res.data.eduAnnex.split(",");
            if (a.length > 0) {
              a.forEach((item) => {
                var obj = {};
                let index = item.lastIndexOf("\/");
                // let fileName = item.substring(index + 1, item.length).split("&")[0]; //最后的文件名截取出来
                let fileName = res.data.name + "学历扫描件";
                vm.$set(obj, "name", fileName);
                vm.$set(obj, "urls", item); //修改files里面的结构（name,url）
                vm.fileListss.push(obj);
              });
            }
          }

          let selectedOptions = res.data.deptId.split(",");
          this.selectedOptions = selectedOptions.map(Number); //数组里的字符串转换成数字的方法

          // console.log("selectedOptions", this.selectedOptions);
        });

        // this.selectConversion
        // this.selectConversion = sessionStorage.getItem("deptId").split(",");
      }
      this.dialogStation = true;
    },
    //确认-提交
    save(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let url;
          // if(this.form.password){
          //     console.log(this.form.password);
          //     // this.form.password = md5(=this.form.password);
          //     this.form.password = this.form.password
          // }
          this.form.id = this.id;
          let data = this.form;
          // let deptId = this.selectedOptions.slice(-1);
          let deptId = this.selectedOptions;
          data.deptId = deptId.join();
          if (this.static == 0) {
            data.password = md5(this.form.password);
          }
          this.static == 0
            ? (url = insertEmp(data))
            : (url = updateEmp(this.form));
          url.then((res) => {
            // console.log(res);
            if (res.code == 0) {
              this.$message.success("操作成功!");
              this.close("form");
              this.$refs.baseTable.initData();
              this.$nextTick(() => {
                this.selectedOptions = [];
              });
            } else {
              this.$message.error(res.message);
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //删除员工账号
    btnDelete(row) {
      this.$confirm("此操作将永久删除,是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          deleUserAccount(row.id).then((res) => {
            // console.log(res);
            if (res.code == 0) {
              this.$refs.baseTable.initData();
              this.$message.success("删除成功!");
            } else {
              this.$message.error(res.message);
            }
          });
        })
        .catch(() => {
          //  this.$message.info("已取消!");
        });
    },
    //关闭弹框
    close(formName) {
      this.$refs[formName].resetFields();
      this.dialogStation = false;
      this.dialogStations = false;
      this.dialogs = false;
      this.radio = 1;
      this.fileLists = [];
      this.fileListss = [];
    },
    //转正-提交
    btnConver(row) {
      this.titleStation = "员工转正";
      this.form.name = row.name;
      this.id = row.id;
      this.filePath = "";
      this.dialogs = true;
    },
    changeData1(val) {
      console.log(val);
      this.form.startData = val;
    },
    changeData2(val) {
      this.form.endData = val;
    },
    become(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let url;
          let data = {
            uid: this.id,
            name: this.form.name,
            filePath: this.form.filePath,
            laborStartDate: this.form.startData,
            laborEndDate: this.form.endData,
            haveAssess: this.radio,
          };
          setConversion(data).then((res) => {
            // console.log(res);
            if (res.code == 0) {
              this.$message.success("操作成功!");
              this.close("form");
              this.fileList = [];
              this.$refs.baseTable.initData();
            } else {
              this.$message.error(res.message);
            }
          });
        }
      });
    },
  },
};
</script>

<style scoped>
.avatar-uploader-icon {
  border: 1px dashed #d9d9d9;
  font-size: 28px;
  color: #8c939d;
  width: 110px;
  height: 110px;
  line-height: 110px;
  text-align: center;
}

.avatar {
  width: 110px;
  height: 110px;
  display: block;
  margin-top: 15px;
}

.postionbot {
  margin-top: 2%;
}

.tabellijst-l {
  width: 220px;
}

.tabellijst-r {
  width: 85%;
}

.tabellijst {
  display: flex;
  flex-direction: row;
}

.postionbot::-webkit-scrollbar {
  display: none;
}

.postionbots .el-form-item {
  margin-bottom: 1px;
}

.dialog-footer {
  margin-top: 20%;
  display: block;
}

.addPerson {
  margin-bottom: 15px;
}

.warning {
  color: red;
  font-size: 12px;
  display: inline-block;
}

.search {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
